<!DOCTYPE html>
<html>
<head>
    <title>canvas</title>
    <meta charset="utf-8">
    <style type="text/css">
    *{
        padding: 0;
        margin: 0;
    }
    body{
        background-color: #fff;
        font-size: 30px;
    }
    canvas{
        background-color: #fff;
        border:1px solid black;
    }
    #c1 span{
        color: #abc;
    }
    </style>
</head>
<body>
    <ul>
        <li>妙</li>
        <li>味</li>
        <li>课</li>
        <li>堂</li>
    </ul>
    <div>
        <span>徐</span>
        <span>璇</span>
    </div>
    <canvas id="c1" width="400" height="400"></canvas>
    <canvas id="c2" width="400" height="400"></canvas>
    <canvas id="c3" width="400" height="400"></canvas>
    <canvas id="c4" width="400" height="400"></canvas>
    <canvas id="c5" width="400" height="400"></canvas>
    <canvas id="c6" width="400" height="400"></canvas>
    <canvas id="c7" width="400" height="400"></canvas>
    <canvas id="c8" width="400" height="400"></canvas>
    <canvas id="c9" width="400" height="400"></canvas>

    <script type="text/javascript">


window.onload  = function(){

//-------getImageData  putImageData---------------------------------------------
var oC1 = document.getElementById("c1");
var oGC1 = oC1.getContext("2d");

oGC1.fillRect(0,0,100,100);

var oImg = oGC1.getImageData(0,0,100,100);

for(var i=0; i<oImg.width*oImg.height; i++){
    oImg.data[i*4] = 12;
    oImg.data[i*4 + 1] = 122;
    oImg.data[i*4 + 2] = 255;
    oImg.data[i*4 + 3] = 200;
}
oGC1.putImageData(oImg,100,100);

//----------getImageData  putImageData------------
var oC2 = document.getElementById("c2");
var oGC2 = oC2.getContext("2d");

var obj =oGC2.createLinearGradient(100,100,300,300);
obj.addColorStop(0,"red");
obj.addColorStop(0.5,"yellow");
obj.addColorStop(1,"blue");
oGC2.fillStyle = obj;
oGC2.fillRect(100,100,200,200);

var oImg = oGC2.getImageData(100,100,100,100);
oGC2.putImageData(oImg,10,10);


//--------------createImageData --------------------------------
var oC3 = document.getElementById("c3");
var oGC3 = oC3.getContext("2d");

var oImg = oGC3.createImageData(100,100);

for(var i=0; i<oImg.width*oImg.height; i++){
    oImg.data[i*4] = 12;
    oImg.data[i*4 + 1] = 122;
    oImg.data[i*4 + 2] = 255;
    oImg.data[i*4 + 3] = 200;
}
oGC3.putImageData(oImg,100,100);



//-------------像素显字（有动画效果）---------------------------------
var oC4 = document.getElementById("c4");
var oGC4 = oC4.getContext("2d");
var aLi = document.getElementsByTagName('li');

for(var i=0; i<aLi.length; i++){
    aLi[i].onclick = function(){
        var timer = null;
        var iNow = 0;
        clearInterval(timer);
        // 清空画布
        oGC4.clearRect(0,0,oC4.width,oC4.height);

        // 把标签中的文字写到画布中心位置
        var str = this.innerHTML;
        var h = 180;
        oGC4.font = h + "px impact";
        oGC4.textBaseline = 'top';
        var w = oGC4.measureText(str).width;
        oGC4.fillText(str, (oC4.width - w)/2, (oC4.height - h)/2);

        //获取画布中的文字，保存到oImg，再次清空画布
        var oImg = oGC4.getImageData((oC4.width - w)/2, (oC4.height - h)/2, w, h);
        oGC4.clearRect(0,0,oC4.width,oC4.height);

        var arr = randomArr(w*h, w*h/10);

        var newImg = oGC4.createImageData(w,h);


        timer = setInterval(function(){
            console.log(iNow);
            for(var i=0; i<arr[iNow].length; i++){
                newImg.data[4*arr[iNow][i]] = oImg.data[4*arr[iNow][i]];
                newImg.data[4*arr[iNow][i]+1] = oImg.data[4*arr[iNow][i]+1];
                newImg.data[4*arr[iNow][i]+2] = oImg.data[4*arr[iNow][i]+2];
                newImg.data[4*arr[iNow][i]+3] = oImg.data[4*arr[iNow][i]+3];
            }
            oGC4.putImageData(newImg,(oC4.width - w)/2, (oC4.height - h)/2);
            iNow++;
            if(iNow == 10){
                iNow = 0;
                clearInterval(timer);
            }
        },100);
    }
}


function randomArr(iAll, iNow){
    var arr = [];
    var allArr = [];
    for(var i=0; i<iAll; i++){
        arr.push(i);
    }
    for(var j=0; j<iAll/iNow; j++){
        var newArr = [];
        for(var i=0; i<iNow; i++){
            newArr.push(arr.splice( Math.floor(Math.random()*arr.length) ,1 ));
        }
        allArr.push(newArr);
    }
    return allArr;
}





//---------------像素显字（无动画效果）-------------------------------
var oC5 = document.getElementById("c5");
var oGC5 = oC5.getContext("2d");
var aSpan = document.getElementsByTagName("span");

for(var i=0; i<aSpan.length; i++){
    aSpan[i].onclick = function(){
        // 清空画布
        oGC5.clearRect(0,0,oC4.width,oC4.height);
        
        // 把标签中的文字写到画布中心位置
        var str = this.innerHTML;
        var h = 180;
        oGC5.font = h + "px impact";
        oGC5.textBaseline = 'top';
        var w = oGC5.measureText(str).width;
        oGC5.fillText(str, (oC4.width - w)/2, (oC4.height - h)/2);

        //获取画布中的文字，保存到oImg
        var oImg = oGC5.getImageData((oC4.width - w)/2, (oC4.height - h)/2, w, h);
        var arr = randomArrS(w*h, w*h/10);
        var newImg = oGC5.createImageData(w,h);

        for(var i=0; i<arr.length; i++){
            newImg.data[4*arr[i]] = oImg.data[4*arr[i]];
            newImg.data[4*arr[i]+1] = oImg.data[4*arr[i]+1];
            newImg.data[4*arr[i]+2] = oImg.data[4*arr[i]+2];
            newImg.data[4*arr[i]+3] = oImg.data[4*arr[i]+3];
        }
        oGC5.putImageData(newImg,(oC4.width - w)/2, (oC4.height - h)/2);
    }
}


function randomArrS(iAll, iNow){
    var arr = [];
    var newArr = [];
    for(var i=0; i<iAll; i++){
        arr.push(i);
    }
    for(var i=0; i<iNow; i++){
        newArr.push(arr.splice( Math.floor(Math.random()*arr.length) ,1 ));
    }
    return newArr;
}


//-----------图像的像素操作-----------------------------------
var oC6 = document.getElementById("c6");
var oGC6 = oC6.getContext("2d");

var obj =oGC6.createLinearGradient(0,0,100,100);
obj.addColorStop(0,"red");
obj.addColorStop(0.5,"yellow");
obj.addColorStop(1,"blue");
oGC6.fillStyle = obj;

oGC6.fillRect(0,0,200,200);
var oImg = oGC6.getImageData(0,0,200,200);
console.log(getXY(oImg,3,99));
// 来个循环，针对一行一列进行操作
for(var i=0; i<200; i++){
    setXY(oImg, i, 10, [0,0,0,255]);
}

oGC6.putImageData(oImg,200,200);

//获取obj的(x, y)位置的颜色 x,y从0开始算起
function getXY(obj, x, y){  
    var w = obj.width;
    var h = obj.height;
    var d = obj.data;

    var color = [];
    color[0] = d[4 * (w * y + x)];
    color[1] = d[4 * (w * y + x) + 1];
    color[2] = d[4 * (w * y + x) + 2];
    color[3] = d[4 * (w * y + x) + 3];

    return color;
}

//设置obj的(x, y)位置的颜色
function setXY(obj, x, y, color){
    var w = obj.width;
    var h = obj.height;
    var d = obj.data;

    d[4 * (w * y + x)] = color[0];
    d[4 * (w * y + x) + 1] = color[1];
    d[4 * (w * y + x) + 2] = color[2];
    d[4 * (w * y + x) + 3] = color[3];
}


//-----------图片的像素操作（必须是本地的图片, 放到服务器中）-----------------------------------
var oC7 = document.getElementById("c7");
var oGC7 = oC7.getContext("2d");

var yImg = new Image();
yImg.onload = function(){
    draw7(this);
}
yImg.src = "../img/img3.png";

function draw7(obj){
    oC7.width = obj.width;
    oC7.height = obj.height*2;
    oGC7.drawImage(obj,0,0);

    var oImg = oGC7.getImageData(0,0,obj.width,obj.height);
    var w = oImg.width;
    var h = oImg.height;

    for(var j=0; j<h; j++){

        for(var i = 0; i<w; i++){
            var gcolor = getXY(oImg, i, j);
            // console.log(gcolor);
            var scolor = [255-gcolor[0], 255-gcolor[1], 255-gcolor[2], gcolor[3]];
            // console.log(scolor);
            setXY(oImg, i, j, scolor);
        }
    }

    oGC7.putImageData(oImg, 0, obj.height);
}


//-----------图片的像素操作（倒影）-----------------------------------
var oC8 = document.getElementById("c8");
var oGC8 = oC8.getContext("2d");

var yImg = new Image();
yImg.onload = function(){
    draw8(this);
}
yImg.src = "../img/img3.png";

function draw8(obj){
    oC8.width = obj.width;
    oC8.height = obj.height*2;
    oGC8.drawImage(obj,0,0);

    var oImg = oGC8.getImageData(0,0,obj.width,obj.height);
    var shadowImg = oGC8.createImageData(obj.width, obj.height);

    var w = oImg.width;
    var h = oImg.height;

    for(var j=0; j<h; j++){

        for(var i = 0; i<w; i++){
            var gcolor = getXY(oImg, i, j);
            var scolor = [255-gcolor[0], 255-gcolor[1], 255-gcolor[2], gcolor[3]*j/h];
            setXY(shadowImg, i, h-j, scolor);
        }
    }

    oGC8.putImageData(shadowImg, 0, obj.height);
}


//-----------图片的像素操作（马赛克）-----------------------------------
var oC9 = document.getElementById("c9");
var oGC9 = oC9.getContext("2d");
var yImg = new Image();
yImg.onload = function(){
    draw9(this);
}
yImg.src = "../img/img3.png";

function draw9(obj){
    oC9.width = obj.width;
    oC9.height = obj.height*2;
    oGC9.drawImage(obj,0,0);

    var oImg = oGC9.getImageData(0,0,obj.width,obj.height);
    var shadowImg = oGC9.createImageData(obj.width, obj.height);

    var w = oImg.width;
    var h = oImg.height;
    var step = 7;

    var stepW = Math.ceil(w/step);
    var stepH = Math.ceil(h/step);
    console.log(stepW,stepH);
    for(var i=0; i<stepH; i++){
        for(var j=0; j<stepW; j++){
            var gcolor = getXY(oImg, j*step + Math.floor(Math.random()*step), i*step + Math.floor(Math.random()*step));
            for(var k=0; k<step; k++){
                for(var t=0; t<step; t++){
                    setXY(oImg, j*step+t, i*step+k, gcolor);
                }
            }
        }
    }
    oGC9.putImageData(oImg, 0, obj.height);
}



}
   </script>
</body>
</html>